<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input placeholder="请输入菜单名称" v-model="queryParam.name" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="handleSearch(true)" icon="search">查询</a-button>
              </span>
            </a-col>
            <a-col :md="1" :sm="24" :offset="14">
              <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
        :pagination="{ 'show-total': total => `共 ${total} 条` }"
      >
        <div slot="action_str" slot-scope="text">
          <a-tag v-for="item in text" :key="item" :style="{ margin: '6px' }" color="cyan">{{ item }}</a-tag>
        </div>
        <a-tag :color="text == 1 ? 'blue' : 'red'" slot="is_show" slot-scope="text">{{ text | statusFilter }}</a-tag>
        <span slot="actions" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="handleDelete(record)">删除</a>
          </template>
        </span>
      </s-table>

      <create-form
        ref="createModal"
        @ok="handleSearch"
      />
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getMenuList, menuDel } from '@/api/menu'
import CreateForm from './modules/menuForm'
import formTableMixin from '@/mixins/formTableMixin'

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    width: '8%'
  },
  {
    title: '父级菜单',
    dataIndex: 'p_name',
    width: '8%',
    scopedSlots: { customRender: 'p_name' }
  },
  {
    title: '匹配字符',
    dataIndex: 'web_route'
  },
  {
    title: 'url',
    dataIndex: 'url',
    scopedSlots: { customRender: 'url' }
  },
  {
    title: 'icon',
    dataIndex: 'icon',
    scopedSlots: { customRender: 'icon' }
  },
  {
    title: '模块方法',
    dataIndex: 'action',
    width: '35%',
    scopedSlots: { customRender: 'action_str' }
  },
  {
    title: '权重',
    dataIndex: 'weight',
    scopedSlots: { customRender: 'weight' }
  },
  {
    title: '是否显示',
    dataIndex: 'is_show',
    scopedSlots: { customRender: 'is_show' }
  },
  {
    title: '操作',
    dataIndex: 'actions',
    width: '8%',
    scopedSlots: { customRender: 'actions' }
  }
]

const STATUS = {
  1: '显示',
  2: '不显示',
  0: '不显示'
}

export default {
  name: 'MenuList',
  mixins: [formTableMixin],
  components: {
    CreateForm
  },
  data () {
    this.columns = columns
    this.delAction = menuDel
    return {
      listAction: (parameter) => getMenuList(parameter).then(res => {
         const data = res.data.data
          data.forEach(item => {
            if (item.action_str) {
              item.action = item.action_str.split('\n')
            } else {
              item.action = []
            }
          })
          return res
      })
    }
  },
  filters: {
    statusFilter (key) {
      return STATUS[key]
    }
  }
}
</script>
